{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">

            <div class="row">
                <div class="col-md-12">

                    <div class="row">
                        <!--  社群审核 start-->
                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user-name" style="text-align: left;">
                                        社群审核数据
                                    </div>
                                    <div class="d-cnter">
                                        <div class="item">
                                            <canvas id="communityApproval" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #576AFBFF;">{$check_data.resourcePass}</p>
                                            <div>
                                                已审核通过
                                            </div>
                                            <p>占所有社群的 {$check_data.resourcePassScale}</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="communityReject" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #FF6739FF;">{$check_data.resourceReject}</p>
                                            <div>
                                                驳回社群
                                            </div>
                                            <p>占所有社群的 {$check_data.resourceRejectScale}</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="communityUnreviewed" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #00A0FFFF;">{$check_data.resourceCheck}</p>
                                            <div>
                                                未审核社群
                                            </div>
                                            <p>占所有社群的 {$check_data.resourceCheckScale}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  社群审核 end-->

                        <!--  需求市场审核 start-->
                        <div class="col-md-6">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user-name" style="text-align: left;">
                                        需求市场审核数据
                                    </div>
                                    <div class="d-cnter">
                                        <div class="item">
                                            <canvas id="bazaarApproval" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #576AFBFF;">{$demand_data.countDemand}</p>
                                            <div>
                                                需求总数
                                            </div>
                                            <p>&nbsp;</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="bazaarReject" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #FF6739FF;">{$demand_data.demandCheck}</p>
                                            <div>
                                                审核中
                                            </div>
                                            <p>占所有需求的 {$demand_data.demandCheckScale}</p>
                                        </div>
                                        <div class="item">
                                            <canvas id="bazaarUnreviewed" width="170" height="170"></canvas>
                                            <p class="amount" style="color: #00A0FFFF;">
                                                {$demand_data.demandCompleted}</p>
                                            <div>
                                                已完成
                                            </div>
                                            <p>占所有需求的 {$demand_data.demandCompletedScale}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--  需求市场审核 end-->

                    </div>

                </div>
            </div>


            <div class="list">
                <div class="list-title">
                    <div class="item {if input('type',1) == 1}activeBtn{/if}" onclick="changeList(1,this)">社群列表</div>
                    <div class="item {if input('type',1) == 2}activeBtn{/if}" onclick="changeList(2,this)">需求列表</div>
                    <div class="item {if input('type',1) == 3}activeBtn{/if}" onclick="changeList(3,this)">企业认证</div>
                    <div class="item {if input('type',1) == 4}activeBtn{/if}" onclick="changeList(4,this)">企业招聘</div>
                    <div class="item {if input('type',1) == 5}activeBtn{/if}" onclick="changeList(5,this)">企业社群</div>
                    <div class="action-right" style="margin-left: 0.5rem;">
                        <div class="input-group">
                            <input type="text" name="keywords" id="keywords" autofocus="autofocus"
                                   value="{$Request.get.keywords}" class="form-control"
                                   placeholder="{$placeholder}"
                                   aria-describedby="button-addon1" types="{$type}">
                            <div class="input-group-append">
                                <button class="btn btn-outline-light" id="button-addon1" onclick="searchKeyword()">
                                    <i data-feather="search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="switch_state" {{
           d.state== 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barDemo">
    <div id="appendBarDemo">

    </div>
</script>
<script>
    // 审核编辑
    function resourceCheckEdit(id) {
        window.location.href = '{:url("/check/resourceCheckEdit")}?type=2&id=' + id;
    }

    // 通过
    function resourcePass(id) {
        layer.confirm('通过该审核?', {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/check/resourcePass')}", {id: id}, function (res) {
                console.log(res)
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    // 驳回
    function resourceReject(id) {
        layer.prompt({title: '填写驳回理由', formType: 2}, function (text, index) {
            $.post("{:url('/check/resourceReject')}", {id: id, reject_reason: text}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    // 需求查看
    function demandSee(id) {
        window.location.href = '{:url("/demand/demandShow")}?source=1&id=' + id;
    }

    // 查看需求反馈
    function feedBackSee(obj) {
        // 字符串传对象
        var str = JSON.parse(obj);
        console.log(str, str.nickname);
        var images = '';
        if (str.images) {
            images = '<p><img style="height: 35px;" class="headimgs" title="点我查看原图" onclick="lookimg(this.src)" src=' + str.images + '></p>';
        }

        var html;
        if (str.status) {
            console.log(str.reply_time)
            html = '<p style="border-top: 1px dashed orange;margin-top: 20px;"></p><p style="margin-top: 10px;">官方回复：<span style="color: #39de39">' + str.reply + '</span></p>' +
                '<p style="margin-top: 10px">回复时间：' + str.reply_time + '</p>';
        } else {
            html = '<textarea id="textarea_' + str.id + '" style="margin-top: 20px;width: 80%;min-height: 100px;" class="custom_text form-control" placeholder="随便回复点什么吧~"></textarea><br><button style="padding: .375rem .75rem;" type="button" class="btn btn-secondary" onclick="submitReply(' + str.id + ')">回复</button>';
        }
        layer.open({
            type: 1,
            title: '查看反馈',
            area: ['500px', '400px'], //宽高 t.width() t.height()
            closeBtn: 1,
            shadeClose: true,
            content: '<div class="yourclas1s" style="margin-left: 35px">' +
                '<p style="margin-top: 10px;">反馈人：' + str.nickname + '</p>' +
                '<p style="margin-top: 10px">描述：<span style="color: red">' + str.desc + '</span></p>' +
                '<p style="margin-top: 10px">描述图：' + images + '</p>' +
                '<p style="margin-top: 10px">反馈时间：' + str.create_time + '</p>' +
                '' + html + '' +
                '</div>',
        });
    }

    // 需求反馈回复
    function submitReply(id) {
        var reply = $('#textarea_' + id).val();
        console.log(reply)
        if (reply == '') {
            return layer.msg('随便回复点什么吧~');
        }
        $.post("{:url('/check/demandFeedBackReply')}", {id: id, reply: reply}, function (res) {
            if (res['code'] != 1) {
                toastr.error(res['msg']);
            } else {
                window.parent.location.reload();
            }
        });
        layer.close(layer.index);
    }

    // 需求通过
    function demandPass(id) {
        layer.prompt({
            title: '请填写手续比例', formType: 0, placeholder: '平台收取手续比例，不填默认为10', yes: function (index, layero) {
                var handling_fee = layero.find(".layui-layer-input").val() ? layero.find(".layui-layer-input").val() : 10;
                $.post("{:url('/demand/changeStatus')}", {'id': id, 'handling_fee': handling_fee}, function (res) {
                    if (res['code'] != 1) {
                        toastr.error(res['msg']);
                    } else {
                        window.location.reload();
                    }
                });
                layer.close(index);
            }
        });
        $(".layui-layer-content").prepend("<p style='color:#ffb822 '>审核期中存在反馈，务必确认是否通过审核</p><br>");
    }

    // 驳回处理
    function handleReject(id, $source) {
        // 企业认证
        var action;
        // 企业招聘
        if ($source == 1) {
            action = 'recruit';
            // 企业社群
        } else if ($source == 2) {
            action = 'community';
            // 企业认证
        } else {
            action = 'enterprise';
        }
        layer.prompt({title: '填写驳回理由', formType: 2}, function (text, index) {
            $.post('{:url("/' + action + '/changeStatus")}', {id: id, status: -1, reject_reason: text}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    // 通过处理
    function handlePass(id, $source) {
        // 企业认证
        var action;
        // 企业招聘
        if ($source == 1) {
            action = 'recruit';
            // 企业社群
        } else if ($source == 2) {
            action = 'community';
            // 企业认证
        } else {
            action = 'enterprise';
        }
        layer.confirm('通过该审核?', {icon: 3, title: '提示'}, function (index) {
            $.post('{:url("/' + action + '/changeStatus")}', {id: id, status: 1}, function (res) {
                console.log(res)
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    // 详情处理
    function handleShow(id, $source) {
        var url;
        // 企业招聘
        if ($source == 1) {
            url = '{:url("/recruit/recruitShow")}';
            // 企业社群
        } else if ($source == 2) {
            url = '{:url("/community/communityShow")}';
            // 企业认证
        } else {
            url = '{:url("/enterprise/enterpriseShow")}';
        }
        window.location.href = url + '?source=1&id=' + id;
    }

    //切换
    function changeList(t, e) {
        $('.list-title .item').removeClass('activeBtn');
        $(e).addClass('activeBtn');
        type = t;
        keyword = '';
        var ele = $('input[name=keywords]');
        ele.val('');
        //社群列表
        initcommList(type);
        window.history.replaceState(null, null, './index.html?type=' + type);

        // 更改搜索type
        ele.attr('types', type);
    }

    // 初始请求
    var uri = window.location.search.split('=')[1];
    console.log(uri);
    var type = uri ? uri : 1;
    console.log(type);
    var keyword = '';
    var layer = '';
    layui.use('layer', function () {
        layer = layui.layer;
    });
    //获取社群列表
    initcommList(type);

    // 搜索
    function searchKeyword() {
        keyword = $('input[name=keywords]').val();
        console.log(keyword)
        if (keyword == '') {
            toastr.error('请输入关键词');
            return false;
        }
        initcommList(type, keyword);
    }

    function initcommList(t, k) {
        var arr;
        if (t == 1) {
            arr = [
                // {field: 'id', title: 'ID'}
                {field: 'name_data', title: 'LOGO/名称/行业'}
                , {field: 'users_data', title: '昵称'}
                , {field: 'company_data', title: '二维码/企业/城市'}
                , {field: 'create_time', title: '创建时间'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo', unresize: true}
            ];
        } else if (t == 2) {
            arr = [
                {field: 'name_data', title: 'LOGO/名称/标签'}
                , {field: 'users_data', title: '昵称'}
                , {field: 'ids', title: '序号/编号/订单号'}
                , {field: 'company_data', title: '二维码/人数/城市'}
                , {field: 'create_data', title: '创建时间/卖出时间/访问次数'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]
        } else if (t == 3) {
            arr = [
                {field: 'name', title: '企业'}
                , {field: 'cname', title: '行业'}
                , {field: 'city_name', title: '地区'}
                , {field: 'introduce', title: '企业介绍'}
                , {field: 'create_time', title: '创建时间'}
                , {field: 'headimg', title: '认证用户'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
                , {field: 'remarks', title: '备注'}
            ]
        } else if (t == 4) {
            arr = [
                {field: 'position', title: '职位'}
                , {field: 'salary', title: '薪资'}
                , {field: 'ename', title: '企业'}
                , {field: 'create_time', title: '创建时间'}
                , {field: 'headimg', title: '发布者'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
                , {field: 'remarks', title: '备注'}
            ]
        } else {
            arr = [
                {field: 'logo', title: '封面图'}
                , {field: 'name', title: '社群名称'}
                , {field: 'cname', title: '行业'}
                , {field: 'city_name', title: '地区'}
                , {field: 'create_time', title: '创建时间'}
                , {field: 'qrcode', title: '二维码'}
                , {field: 'headimg', title: '创建者'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
                , {field: 'remarks', title: '备注'}
            ]
        }
        // layui插件
        layui.use('table', function () {
            var table = layui.table
                , form = layui.form;
            // 表格初始化
            table.render({
                elem: '#linkstable'
                , skin: 'line' //行边框风格
                , even: true //开启隔行背景
                , url: "{:url('/check/index')}"
                , method: 'post'
                , where: {type: t, keywords: k}
                , page: true //开启分页
                , cols: [arr],
                done: function (res) {
                    var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                    element.css('overflow', 'visible');
                    element.children('.dropdown-menu').css('min-width', 'auto');

                    var element1 = $('td[data-field="introduce"],td[data-field="remarks"]').children('.layui-table-cell');
                    element1.css('white-space', 'nowrap');


                    console.log(res)
                    var html = '';
                    $.each(res.data, function (key, value) {
                        var elemt = $($('.layui-table-cell #appendBarDemo')[key]);
                        // 社群列表
                        if (res.type == 1) {
                            console.log(value.status)
                            // 审核中
                            if (value.status == 0) {
                                html += '' +
                                    '<button class="btn btn-sm btn-outline-secondary" onclick="resourceReject(' + value.id + ')">驳回</button><br>' +
                                    '<button class="btn btn-sm btn-outline-secondary" onclick="resourcePass(' + value.id + ')">通过</button><br>' +
                                    '<button class="btn btn-sm btn-outline-secondary" onclick="resourceCheckEdit(' + value.id + ')">编辑</button>';
                            }
                            // 已驳回
                            if (value.status == -1) {
                                html += '<p>已驳回：<span style="color:red">' + value.reject_reason + '</span></p>';
                            }

                            // 需求列表
                        } else if (res.type == 2) {
                            html += '' +
                                '<button class="btn btn-sm btn-outline-secondary" onclick="demandSee(' + value.id + ')">详情</button><br>';
                            if (value.isFeedback) {
                                var obj = value.feedback;
                                // 对象转字符串
                                html += '<button class="btn btn-sm btn-outline-secondary" onclick="feedBackSee(\'' + JSON.stringify(obj).replace(/"/g, '&quot;') + '\')">收到反馈</button><br><button class="btn btn-sm btn-outline-success" onclick="demandPass(' + value.id + ')">通过</button>';
                            } else {
                                html += '<button class="btn btn-sm btn-outline-secondary" disabled style=" background: #c3c5c8 !important;border-color: #c3c5c8 !important">收到反馈</button>';
                            }

                            // 企业认证、企业招聘、企业社群
                        } else {
                            var source;
                            // 企业招聘
                            if (res.type == 4) {
                                source = 1;
                                // 企业社群
                            } else if (res.type == 5) {
                                source = 2;
                                // 企业认证
                            } else {
                                source = 0;
                            }
                            // 审核中
                            if (value.status == 0) {
                                html += '' +
                                    '<button class="btn btn-sm btn-outline-warning" onclick="handleReject(' + value.id + ',' + source + ')">驳回</button><br>' +
                                    '<button class="btn btn-sm btn-outline-success" onclick="handlePass(' + value.id + ',' + source + ')">通过</button><br>';
                            }

                            // 已驳回
                            if (value.status == -1) {
                                html += '<span class="btn btn-sm btn-outline-danger">已驳回</span><br>';
                            }

                            // 已通过
                            if (value.status == 1) {
                                html += '<span class="btn btn-sm btn-outline-info">已通过</span><br>';
                            }

                            html += '<button class="btn btn-sm btn-outline-secondary" onclick="handleShow(' + value.id + ',' + source + ')">详情</button><br>';

                        }

                        // 节点渲染
                        elemt.html(html);

                        // 重置
                        html = '';

                        $('input[name=keywords]').attr('placeholder', res.placeholder);
                    });
                },

                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.list,
                        "type": res.data.type,
                        "placeholder": res.data.placeholder,
                    };
                }
            });

            // // 搜索
            // $('#button-addon1').on('click', function () {
            //     var keywords = $("#keywords").val();
            //     var types = $("#keywords").attr('types');
            //     table.reload('linkstable', {
            //         url: "{:url('/check/index')}"
            //         , where: {
            //             keywords: keywords, type: types// 搜索参数
            //         }
            //         , page: {
            //             curr: 1 //重新从第 1 页开始
            //         }
            //     });
            // });
        });
    }


    // 社群审核通过
    var chartDom = document.getElementById('communityApproval');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$check_data.resourcePassScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastPass}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourcePass}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#4a39edFF'},
                                    {offset: 1, color: '#5b78ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // 社群审核驳回
    var chartDom = document.getElementById('communityReject');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$check_data.resourceRejectScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastReject}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourceReject}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#ff4438FF'},
                                    {offset: 1, color: '#ffa13bFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // 社群未审核
    var chartDom = document.getElementById('communityUnreviewed');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$check_data.resourceCheckScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastCheck}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourceCheck}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#322ffdFF'},
                                    {offset: 1, color: '#00c7ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);


    // 需求市场总数
    var chartDom = document.getElementById('bazaarApproval');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "需求总数",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                {value: "{$demand_data.countDemand}"},
            ]
        }]
    };
    myChart.setOption(option);

    // 需求审核中
    var chartDom = document.getElementById('bazaarReject');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$demand_data.demandCheckScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$demand_data.demandLastCheck}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$demand_data.demandCheck}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#ff4438FF'},
                                    {offset: 1, color: '#ffa13bFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // 需求已完成
    var chartDom = document.getElementById('bazaarUnreviewed');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$demand_data.demandCompletedScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$demand_data.demandLastCompleted}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$demand_data.demandCompleted}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#322ffdFF'},
                                    {offset: 1, color: '#00c7ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);
</script>
<style>
    .activeBtn {
        color: #fff !important;
        background-color: #3F6EFFFF !important;
    }

    .list-title {
        display: flex;
        align-items: center;
    }

    .list-title .item {
        font-size: 14px;
        border-radius: 3px;
        background-color: #F0F0F0FF;
        color: #999999FF;
        display: grid;
        place-items: center;
        margin-right: 45px;
        cursor: pointer;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;

    }

    .amount {
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: 600;
    }

    .d-cnter {
        display: flex;
        flex-wrap: wrap;
    }

    .d-cnter .item {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .d-cnter .item div {
        color: #2E3033FF;
    }

    .d-cnter .item p:nth-last-child(1) {
        color: #999999FF;
    }

    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }

    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }

    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sel-bottom:active {
        background: #3377FF;
    }

    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;

    }

    .bg-txt {
        display: flex;
        margin-top: 5px;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .txt-cen {
        text-align: center;
    }

    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }

    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }

    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .d-th {
        padding-left: 10px;
        text-align: center;
    }

    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }

    .t {
        color: #576AFB;
    }

    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }

    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }

    .b {
        color: #FF6739;
    }

    .w {
        color: #00A0FF;
    }

    .keword {
        display: flex;
    }

    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }

    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }

    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>
</html>
